import React,{Component} from 'react'
import { BrowserRouter,Route,Link,Switch,Redirect,useLocation } from 'react-router-dom';
import './Content.css'
import Home from './Home'
import Detail from './Detail';
import Login from './Login';
import { useAuth } from './AuthProvider';

// const Home = ()=>{
//     return <h1>首页</h1>
// }
const New = (props)=>{
    return(
        <div>
            {props.children}
            <h1>新手入门</h1>
        </div>
    )
}
const User =(props)=>{
    console.log(props);
    return <h1>用户详情页</h1>
}
const Collect = () =><h1>收藏页面</h1>

const PrivateRoute = ({component:Component,children,...rest})=>{
    const {isLogin} = useAuth();
    return <Route {...rest} render={(props)=>{
        console.log(props);
        if(!isLogin){
            // props.history.push('/login')
            return <Redirect to={{
                pathname: '/login',
                state: props.location
            }} />
        }

        //兼容单标签和双标签
        return Component?<Component />:children
    }}/>
}


const Content = () => {
    return (
        <div className='content-wrap'>
            <div className='content'>
                <div className="left">

                {/**组件双标签形式，子元素以props.children形式显示 */}
                {/* <New>
                    <h1>1233</h1>
                </New> */}

                <Switch>
                    <Route exact path='/'><Home /></Route>
                    <Route path='/home'><Home /></Route>
                    <Route path='/new'><New /></Route>
                    <Route path='/login'><Login /></Route>
                    <Route path='/detail/:id'><Detail /></Route>
                    <PrivateRoute path='/collect' component={Collect} />
                    <PrivateRoute path='/user' component={User} />
                    {/* <Route path='/:userName' component={User} /> */}
                    {/* <Redirect to={'/home'} /> */}
                    <Route render={()=><h1>您访问的页面不存在</h1>} />
                </Switch>
                </div>
                <div className="right"></div>
            </div>
        </div>
    )
}

export default Content
